@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$typography: map.get(gio.$mat-theme, typography);

:host {
  display: flex;
  flex: 1 1 auto;
}

.gio-request-stats {
  display: flex;
  flex-flow: column;
  flex-direction: row;
  flex: 1 1 auto;

  &__body {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;

    &__title {
      @include mat.typography-level($typography, subtitle-1);
      border-bottom: 1px mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10') solid;
      height: 52px;
      padding-right: 8px;
    }

    &__rows {
      :first-child {
        border: none;
      }

      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
    }

    &__row {
      flex: 1 1 auto;
      gap: 4px;
      display: flex;
      flex-direction: column;
      border-top: 1px mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10') solid;
      padding: 4px 8px 4px 0;
      justify-content: center;

      &__label {
        @include mat.typography-level($typography, 'caption');
      }

      &__value {
        @include mat.typography-level($typography, 'body-1');
      }
    }

    & + & {
      border-left: 1px mat.get-color-from-palette(gio.$mat-dove-palette, 'darker10') solid;

      .gio-request-stats__body__title,
      .gio-request-stats__body__row {
        padding-right: 0;
        padding-left: 8px;
      }
    }
  }
}
